<template>
  <div
    class="scan_qr"
    ref="scan_qr_box"
  >
    <!-- <qrcode-stream
      :torch="torchActive"
      class="qrcode"
      @decode="onDecode"
    >
      <div
        class="maskss"
        ref="mask"
      >
        <div
          class="box"
          ref="mask_box"
        >
          <div class="border">
            <span type="1" /><span type="2" /><span type="3" /><span type="4" />
          </div>
          <div class="line" />
        </div>
      </div>
    </qrcode-stream> -->
  </div>
</template>

<script>
// import { QrcodeStream } from "vue-qrcode-reader";
var barcode = null;
export default {
  name: "ScanPage",
  components: {
    // QrcodeStream,
  },
  data() {
    return {
      originState: null,
      torchActive: false,
    };
  },
  mounted() {
    // let maskW = this.$refs.mask.clientWidth;
    // let maskH = this.$refs.mask.clientHeight;

    // let boxW = this.$refs.mask_box.clientWidth;
    // let boxH = this.$refs.mask_box.clientHeight;

    // this.$refs.mask_box.style.borderWidth =
    //   (maskH - boxH) / 2 + "px " + (maskW - boxW) / 2 + "px";

    // // eslint-disable-next-line no-undef
    this.originState = history.state.current; // 存储原始的状态
    window.addEventListener("popstate", this.onPopstate, false);
    window.history.pushState({target: this.originState, random: Math.random()}, "", location.href);
    this.onLoad();
  },
  beforeDestroy() {
    window.removeEventListener("popstate", this.onPopstate, false);
  },
  methods: {
    onPopstate(e) {
      if (e.state && (e.state.current === this.originState || e.state.target === this.originState)) {
        barcode.close();
        // eslint-disable-next-line no-undef
        // plus.navigator.setFullscreen(false);
        this.$router.back()
      }
    },
    onLoad() {
      // eslint-disable-next-line no-undef
      var currentWebview = plus.webview.currentWebview();
      this.createBarcode(currentWebview); //创建二维码窗口
      // this.createView(currentWebview); //创建操作按钮及tips界面
    },
    createView(currentWebview) {
      // 创建返回原生按钮
      // eslint-disable-next-line no-undef
      var backVew = new plus.nativeObj.View(
        "backVew",
        {
          top: "13px",
          left: "0px",
          height: "40px",
          width: "100%",
        },
        [
          {
            tag: "img",
            id: "backBar",
            src: "assets/img/left.png",
            position: {
              top: "15px",
              left: "3px",
              width: "25px",
              height: "25px",
            },
          },
        ]
      );
      // 创建打开手电筒的按钮
      // eslint-disable-next-line no-undef
      var scanBarVew = new plus.nativeObj.View(
        "scanBarVew",
        {
          top: "55%",
          left: "40%",
          height: "10%",
          width: "20%",
        },
        [
          {
            tag: "img",
            id: "scanBar",
            src: "assets/img/sdt.png",
            position: {
              width: "28%",
              left: "36%",
              height: "30%",
            },
          },
          {
            tag: "font",
            id: "font",
            text: "轻触照亮",
            textStyles: {
              size: "10px",
              color: "#ffffff",
            },
            position: {
              width: "80%",
              left: "10%",
            },
          },
        ]
      );
      // 创建展示类内容组件
      // eslint-disable-next-line no-undef
      var content = new plus.nativeObj.View(
        "content",
        {
          top: "13px",
          left: "0px",
          height: "100%",
          width: "100%",
        },
        [
          {
            tag: "font",
            id: "scanTips",
            text: this.name,
            textStyles: {
              size: "14px",
              color: "#ffffff",
              whiteSpace: "normal",
            },
            position: {
              top: "90px",
              left: "10%",
              width: "80%",
              height: "wrap_content",
            },
          },
        ]
      );
      backVew.interceptTouchEvent(true);
      scanBarVew.interceptTouchEvent(true);
      currentWebview.append(content);
      currentWebview.append(scanBarVew);

      var temp = this;
      scanBarVew.addEventListener(
        "click",
        function () {
          //点亮手电筒
          temp.flash = !temp.flash;
          if (temp.flash) {
            scanBarVew.draw([
              {
                tag: "img",
                id: "scanBar",
                src: "assets/img/sdt.png",
                position: {
                  width: "28%",
                  left: "36%",
                  height: "30%",
                },
              },
              {
                tag: "font",
                id: "font",
                text: "轻触照亮",
                textStyles: {
                  size: "10px",
                  color: "#ffffff",
                },
                position: {
                  width: "80%",
                  left: "10%",
                },
              },
            ]);
          } else {
            scanBarVew.draw([
              {
                tag: "img",
                id: "scanBar",
                src: "assets/img/sdt.png",
                position: {
                  width: "28%",
                  left: "36%",
                  height: "30%",
                },
              },
              {
                tag: "font",
                id: "font",
                text: "轻触照亮",
                textStyles: {
                  size: "10px",
                  color: "#ffffff",
                },
                position: {
                  width: "80%",
                  left: "10%",
                },
              },
            ]);
          }
          if (barcode) {
            barcode.setFlash(temp.flash);
          }
        },
        false
      );
    },
    createBarcode(currentWebview) {
      // eslint-disable-next-line no-undef
      barcode = plus.barcode.create("barcode", [plus.barcode.QR], {
        top: "0",
        left: "0",
        width: "100%",
        height: "100%",
        scanbarColor: "#1DA7FF",
        position: "static",
        frameColor: "#1DA7FF",
      });
      barcode.onmarked = this.onmarked;
      barcode.setFlash(this.flash);
      currentWebview.append(barcode);
      barcode.start();
    },
    async onmarked(type, result) {
      this.api.GET_PREBRIDGE_DETAIL(result).then(() => {
        barcode.close();
        this.$router.replace({ path: "/task/set/" + result, query: { type: "qr" } });
      }).catch(() => {
        alert('预制梁不存在')
        barcode.start()
      })
    },
    async onDecode(context) {
      console.log(context);
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes scanLine {
  from {
    margin-top: -100%;
    transform: translateY(0);
  }
  to {
    margin-top: 0%;
    transform: translateY(-4px);
  }
}
.scan_qr {
  width: 100vw;
  height: 100vh;
  .qrcode {
    width: 100%;
    height: 100%;
  }
  .maskss {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    .torch {
      display: inline-block;
      width: 60px;
      text-align: center;
      height: 28px;
      background: rgba(255, 255, 255, 0.5);
      line-height: 28px;
      transition: all 0.3s;
      &.open {
        background: rgba(40, 243, 57, 0.5);
        color: #fff;
      }
    }
    .box {
      width: 220px;
      height: 220px;
      border-color: rgba(0, 0, 0, 0.4);
      border-style: solid;
      position: relative;
      .line {
        margin-top: -100%;
        transform: translateY(0);
        width: 100%;
        height: 5px;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#def5f9+0,00d0f9+100&1+0,0.3+100 */
        background: -moz-radial-gradient(
          center,
          ellipse cover,
          rgba(222, 245, 249, 1) 0%,
          rgba(0, 208, 249, 0.3) 100%
        ); /* FF3.6-15 */
        background: -webkit-radial-gradient(
          center,
          ellipse cover,
          rgba(222, 245, 249, 1) 0%,
          rgba(0, 208, 249, 0.3) 100%
        ); /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(
          ellipse at center,
          rgba(222, 245, 249, 1) 0%,
          rgba(0, 208, 249, 0.3) 100%
        ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#def5f9', endColorstr='#4d00d0f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        border-radius: 100%;
        opacity: 0.6;
        animation: 1.5s ease-in-out 0s infinite alternate scanLine;
      }

      .border {
        width: 100%;
        height: 100%;
        position: relative;
        span {
          position: absolute;
          display: block;
          border-color: #0199ff;
          border-style: solid;
          width: 40px;
          height: 40px;
          &[type="1"] {
            border-width: 4px 0 0 4px;
            top: -2px;
            left: -2px;
          }
          &[type="2"] {
            border-width: 4px 4px 0 0;
            top: -2px;
            right: -2px;
          }
          &[type="3"] {
            border-width: 0 4px 4px 0;
            bottom: -2px;
            right: -2px;
          }
          &[type="4"] {
            border-width: 0 0 4px 4px;
            bottom: -2px;
            left: -2px;
          }
        }
      }
    }
  }
}
</style>
